import React, { useEffect, useState } from 'react';
import { Space, Table, Button, Tag } from 'antd';
import type { TableProps } from 'antd';
import axios from 'axios';
function ListQj() {
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
    }

    const [data, setData] = useState('')




    const columns: TableProps<DataType>['columns'] = [
        {
            title: 'roleName',
            dataIndex: 'roleName',
            key: 'roleName',
            render: (text) => <a>{text}</a>,
        },
        {
            title: 'createTime',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '请假时间',
            dataIndex: 'showIndex',
            key: 'showIndex',
        },
        {
            title: 'status',
            dataIndex: 'status',
            key: 'status',
            render: (text) => <a>{text == 0 ? <Tag color="blue">审核</Tag> : <Tag color="default">草稿</Tag>}</a>,
        },

        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    {/* 如果status为0按钮显示否则隐藏 */}
                    {record.status == 0 ? <Button>查看</Button> : <Button>编辑</Button>}

                    {record.status == 0 ? '' : <Button onClick={() => tijiao(record)}>提交</Button>}
                </Space>
            ),
        },
    ];

    // const data: DataType[] = [
    //     {
    //         key: '1',
    //         name: 'John Brown',
    //         age: 32,
    //         address: 'New York No. 0Lake Park',
    //         tags: ['nice', 'developer'],
    //     },
    //     {
    //         key: '2',
    //         name: 'Jim Green',
    //         age: 42,
    //         address: 'London No. 0Lake Park',
    //         tags: ['loser'],
    //     },
    //     {
    //         key: '3',
    //         name: 'Joe Black',
    //         age: 32,
    //         address: 'Sydney No. 0Lake Park',
    //         tags: ['cool', 'teacher'],
    //     },
    // ];


    const [username, setuseName] = useState('')
    const [phone, setPhone] = useState('')
    const [status, setstatus] = useState('')
    const [cardNo, setCardNo] = useState('')
    const getData = () => {
        axios.post('/api/roleList', {
            params: {
                username,
                phone,
                status,
            }
        }).then((res) => {
            console.log(res);
            setData(res.data.tableList)

        })
    }

    useEffect(() => {
        getData()
    }, [])

    // 31.点击提交可正确改变该数据的状态
    const tijiao = (record) => {
        console.log('提交');
        axios.post('/api/updateRoleStatus', {
            params: {
                key: record,
                status: 0
            }
        }).then((res) => {
            console.log(res.data.tableList);
            setData(res.data.tableList)
        })
    }


    return (
        <div>
            <Table<DataType> columns={columns} dataSource={data} />
        </div>
    )
}

export default ListQj